<template>
  <div class="company-edit">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="LOGO" style="width: 400px" prop="logo">
        <el-upload class="avatar-uploader" action="" :show-file-list="false">
          <img v-if="form.logo" :src="form.logo" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-row>
        <el-col :span="6">
          <el-form-item label="公司全称" prop="fullName">
            <el-input v-model="form.fullName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公司简称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="industryList.length > 0">
        <el-col :span="4">
          <el-form-item label="所属行业" prop="industryId">
            <el-select v-model="form.industryId" placeholder="请选择">
              <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="公司性质" prop="nature">
            <el-select v-model="form.nature" placeholder="请选择">
              <el-option v-for="(item, index) in natureArray" :key="index" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="公司规模" prop="scale">
            <el-select v-model="form.scale" placeholder="请选择">
              <el-option v-for="(item, index) in scaleArray" :key="index" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="welfareList.length">
        <el-col :span="12">
          <el-form-item label="公司福利" prop="welfare">
            <el-checkbox-group v-model="form.welfare">
              <el-checkbox v-for="(item, index) in welfareList" :label="item.id" :key="index">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6.5">
          <el-form-item label="上班时间" prop="workTime">
            <el-time-picker
              is-range
              arrow-control
              v-model="form.workTime"
              format="HH:mm"
              value-format="HH:mm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="休息时间" prop="weekend">
            <el-select v-model="form.weekend" placeholder="请选择">
              <el-option v-for="(item, index) in weekendArray" :key="index" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="加班情况" prop="workOvertime">
            <el-select v-model="form.workOvertime" placeholder="请选择">
              <el-option v-for="(item, index) in overTimeArray" :key="index" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="公司地址" prop="address" style="width: 700px">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="官网链接" prop="link" style="width: 700px">
        <el-input v-model="form.link"></el-input>
      </el-form-item>
      <el-form-item label="公司简介" prop="introduce" style="width: 70%">
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.introduce"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuit">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCompanyDetail, updateCompany } from '@/api/company'
import { getWelfareList } from '@/api/welfare'
import { getIndustryList } from '@/api/industry'
import { scaleArray, natureArray, weekendArray, overTimeArray } from './const'

export default {
  data() {
    return {
      scaleArray, // 规模
      natureArray, // 性质
      weekendArray, // 周末
      overTimeArray, // 加班
      welfareList: [], // 福利
      industryList: [], // 性质
      form: {},
      rules: {
        fullName: { required: true, trigger: 'blur', message: '公司全称不能为空' },
        name: { required: true, trigger: 'blur', message: '公司简称不能为空' },
        industryId: { required: true, trigger: 'change', message: '公司行业不能为空' },
        nature: { required: true, trigger: 'change', message: '公司性质不能为空' },
        scale: { required: true, trigger: 'change', message: '公司规模不能为空' },
        welfare: { required: true, trigger: 'change', message: '公司福利不能为空' },
        workTime: { required: true, trigger: 'change', message: '上班时间不能为空' },
        weekend: { required: true, trigger: 'change', message: '休息时间不能为空' },
        workOvertime: { required: true, trigger: 'change', message: '加班情况不能为空' },
        address: { required: true, trigger: 'blur', message: '公司地址不能为空' }
      }
    }
  },
  mounted() {
    const id = this.$route.query.id
    this.initData(id)
  },
  methods: {
    // 初始化数据
    async initData(id) {
      const res = await getCompanyDetail(id)
      const welfare = await getWelfareList()
      const industry = await getIndustryList({ page: 1, size: 99, pid: 0 })

      this.industryList = industry.data.list
      this.welfareList = welfare.data.list.map((item) => {
        return { id: item.id, name: item.name }
      })

      this.form = res.data
      const { workTime } = res.data

      if (workTime && workTime !== '') {
        const time = workTime.split('-')
        this.form.workTime = [time[0], time[1]]
      }
      if (this.form.welfare.length) {
        this.form.welfare = this.form.welfare.map((item) => item.id)
      }
    },
    // 保存数据
    handleSubmit() {
      this.$refs['formRef'].validate(async (valid) => {
        if (!valid) return false

        this.form.workTime = this.form.workTime.join('-')
        this.form.welfare = this.form.welfare.join(',')

        const res = await updateCompany(this.form.id, this.form)
        if (res.code === 200) {
          this.$message.success('保存成功')
          this.$router.go(-1)
        }
      })
    },
    handleQuit() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
